<template>
	<view :style="{height:windowHeight+'px'}">
		
			<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" left-text="返回" title="站点管理" @clickLeft="back" />
			<uni-section padding="0 10px" title="">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<uni-search-bar placeholder="输入站点名字/厂家/处理规模/工艺" bgColor="#F3F3F3" @confirm="search" />
					<uni-card  :isFull="true" v-for="(item,index) in 5">
					 <view class="menu-container">
					    <view class="menu-header" @click="toggleMenu(index)">
						  <text class="jiedao">顶山街道{{index}}</text>
						  <view class="numStyle">
							  <text class="num">120</text>
							  <text class="arrow">{{ isOpen[index] ? '▲' : '▼' }}</text>
						  </view>
					    </view>
					    <view v-show="isOpen[index]" class="menu-items">
					      <!-- 菜单项 -->
					      <view class="menu-item" v-for="(item1,index1) in 4"  @click="detail()">
							  <view> <image src="../../static/icon/laicon.png" mode=""></image>垃圾站{{index1}} </view>
							  <view>
							  							  >
							  </view>
						  </view>
					    </view>
					  </view>
					</uni-card>
				</view>
			</uni-section>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
				items: ['站点管理', '站点收藏'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				 isOpen: new Array(5).fill(false) // 初始化 isOpen 数组，长度为 5，初始值为 false
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//选项卡选择
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			//查看详情
			detail(e) {
				uni.navigateTo({
					url:'/pages/zhandian/jichu'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			toggleMenu(index) {
		      // 切换对应索引位置的 isOpen 状态
		      this.isOpen[index] = !this.isOpen[index];
		    }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.uni-card{
			margin: 0.8rem 0 !important;
		}
		.ml5{
			margin-left: 1rem;
		}
		padding: 20rpx 0;
		.menu-header{
			display: flex;
			justify-content: space-between;
			padding: 0.3rem 0;
			.jiedao{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 1.1rem;
				color: #222222;
			}
			.numStyle{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 1rem;
				.num{
					display: inline-block;
					background-color: #0289FF;
					color: white;
					padding: 0 0.5rem;
					border-radius: 1rem;
				}
				.arrow{
					color: #0289FF;
				}
			}
		}
		.menu-items{
			margin-top: 1rem;
			display: flex;
			flex-direction: column;
		
			.menu-item{
				width: 100%;
				line-height: 2.5rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					display: flex;
					align-items: center;
					image{
						width: 1.5rem;
						height: 1.5rem;
						padding-right: 0.5rem;
					}
				}
			}
		}
		
		
	}
</style>
